Web History API একটি JavaScript API যা ব্রাউজারের ইতিহাস (history) পরিচালনা করার জন্য ব্যবহৃত হয়। এর মাধ্যমে ডেভেলপাররা ব্রাউজারের হিষ্ট্রি স্ট্যাকের সাথে ইন্টারঅ্যাক্ট করতে পারে এবং ওয়েব পেজের URL পরিবর্তন করতে পারে, সেসময় পেজের রিফ্রেশ ছাড়াই নতুন কন্টেন্ট লোড করা সম্ভব হয়। এটি সাধারনত "Single Page Applications" (SPA) তৈরির জন্য ব্যবহৃত হয় যেখানে পুরো পেজ রিলোড ছাড়াই নতুন কন্টেন্ট দেখা যায়।
Web History API এর মাধ্যমে ব্রাউজারের URL পরিবর্তন করা, আগের বা পরের পেজে নেভিগেট করা এবং পেজের অবস্থান ট্র্যাক করা সম্ভব। এটি মূলত history অবজেক্ট এবং এর সাথে সংশ্লিষ্ট কিছু মেথডের মাধ্যমে কাজ করে।
pushState() মেথড ব্যবহার করে আপনি বর্তমান ব্রাউজারের URL এর সাথে একটি নতুন স্টেট (state) যোগ করতে পারেন। এটি ওয়েব পেজের কন্টেন্ট বদলানোর জন্য কোনো পেজ রিফ্রেশ ছাড়াই URL পরিবর্তন করতে সাহায্য করে।
history.pushState({ page: "home" }, "Home Page", "/home");
এখানে, pushState() মেথড ব্যবহার করে ব্রাউজারের URL এ /home পাতা যোগ করা হয়েছে, কিন্তু পেজ রিফ্রেশ হয়নি।
replaceState() মেথড ব্যবহার করে আপনি বর্তমান পেজের ইতিহাস পরিবর্তন করতে পারেন, যেটি URL পরিবর্তন করতে সহায়তা করে কিন্তু নতুন পেজ হিসেবেও ইতিহাসে যুক্ত হয় না। এটি pushState() এর মতোই কাজ, তবে এর ফলে আগের পেজের রেকর্ড ইতিহাস থেকে মুছে যায়।
history.replaceState({ page: "about" }, "About Page", "/about");
এখানে, replaceState() মেথড ব্যবহার করে বর্তমান পেজের URL /about এ পরিবর্তিত হচ্ছে, কিন্তু ইতিহাসের আগের পেজের রেকর্ড মুছে যাচ্ছে।
back(), forward(), এবং go() মেথড ব্যবহার করে আপনি ব্রাউজারের ইতিহাসে আগের বা পরের পেজে যেতে পারেন। এই মেথডগুলি সাধারণত ব্রাউজারের ব্যাক বাটন বা ফরওয়ার্ড বাটন ট্র্যাক করার জন্য ব্যবহৃত হয়।
history.back(); // আগের পেজে চলে যাবে
history.forward(); // পরের পেজে চলে যাবে
history.go(-1); // আগের পেজে যাবে, একইভাবে 1- এর পরিবর্তে অন্য কোনো সংখ্যাও ব্যবহার করা যাবে
এখানে, go() মেথডের মাধ্যমে আপনি নির্দিষ্ট সংখ্যার মাধ্যমে ইতিহাসে নেভিগেট করতে পারেন। -1 মানে আগের পেজে ফিরে যাওয়া এবং 1 মানে পরবর্তী পেজে যাওয়া।
popstate ইভেন্ট ব্যবহার করে আপনি যখনই ব্রাউজারের ইতিহাসের মধ্যে পরিবর্তন করবেন তখন সেই পরিবর্তন ট্র্যাক করতে পারেন। এটি বিশেষভাবে কাজে আসে যখন আপনি pushState() বা replaceState() ব্যবহার করেন।
window.addEventListener("popstate", function(event) {
console.log("State changed:", event.state);
});
এখানে, popstate ইভেন্টের মাধ্যমে আপনি যখনই ব্রাউজারের ইতিহাসের মধ্যে পরিবর্তন করবেন, তখন সেই পরিবর্তনটি কনসোলে দেখতে পাবেন।
pushState() বা replaceState() ব্যবহার করে আপনি পেজ রিফ্রেশ না করেই URL পরিবর্তন করতে পারবেন, যা ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করে।back(), forward(), এবং go() মেথডের মাধ্যমে আপনি ব্রাউজারের ইতিহাস নিয়ন্ত্রণ করতে পারবেন, যেমন ব্যাক বাটন বা ফরওয়ার্ড বাটন ব্যবহারের সময়।Web History API ব্রাউজারের ইতিহাসের সাথে ইন্টারঅ্যাক্ট করার একটি শক্তিশালী টুল, যা ব্রাউজারের URL পরিবর্তন, ইতিহাস নিয়ন্ত্রণ এবং পেজের অবস্থান ট্র্যাক করতে সহায়তা করে। এটি বিশেষভাবে Single Page Application (SPA)-এ ব্যবহৃত হয়, যেখানে ওয়েব পেজের রিফ্রেশ ছাড়া নতুন কন্টেন্ট লোড করা সম্ভব হয়। pushState(), replaceState(), এবং popstate ইভেন্টের মতো ফিচারের মাধ্যমে আপনি ওয়েব অ্যাপ্লিকেশনের ইতিহাস ও নেভিগেশনকে আরও নমনীয় এবং ব্যবহারকারীর জন্য স্বাচ্ছন্দ্যময় করে তুলতে পারেন।
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
